<div class="view">
  <div class="view-title">
    计时器
    <button class="embedded" @click="add" v-if="authorized">
      添加
      <i class="material-icons">add</i>
    </button>
  </div>
  <div class="view-search">
    <i class="material-icons">search</i>
    <div class="input-group">
      <input v-model="searchInput" @keydown.esc="searchInput = ''">
      <div class="border-line"></div>
    </div>
    <div class="clear-btn" @click="searchInput = ''" v-show="searchInput" transition="opacity">
      <i class="material-icons">close</i>
    </div>
  </div>
  <div class="list">
    <div class="list-item" v-for="timer of timers | filterBy isStandaloneTimer | filterBy searchInput in 'name'" track-by="$index" :class="{ bold: timer.active }">
      <div class="list-item-indicator"></div>
      <div class="list-item-content timer-row">
        <div class="timer-name">
          {{ timer.name }}
        </div>
        <div class="timer-value-wrapper">
          <timer class="timer-left" :time="timer.left"></timer>
          <span class="timer-value-separator">/</span>
          <timer class="timer-value" :time="timer.value"></timer>
        </div>
        <div class="timer-actions">
          <button class="timer-action light" @click="toggle(timer)" v-if="authorized">
            <i class="material-icons" title="Pause" v-show="timer.active">pause</i>
            <i class="material-icons" title="Start" v-else>play_arrow</i>
          </button>
          <button class="timer-action light" @click="edit(timer)" :disabled="timer.active" v-if="authorized">
            <i class="material-icons" title="Edit">edit</i>
          </button>
          <button class="timer-action light" @click="project(timer)">
            <i class="material-icons" title="Update Cast">cast</i>
          </button>
        </div>
      </div>
    </div>
    <template v-if="!searchInput">
      <div class="empty-hint" v-if="authorized">请点击添加创建计时器</div>
      <div class="empty-hint" v-else>无计时器</div>
    </template>
    <div class="empty-hint" v-else>无搜索结果</div>
  </div>

  <div class="dialog-overlap" transition="opacity" v-show="editFlag" @click="discardEdit">
    <div class="dialog" @click.stop.prevent>
      <div class="dialog-title">
        {{ additionMode ? '创建' : '修改' }}计时器
      </div>
      <div class="dialog-content">
        <div class="input-group">
          <div class="hint">显示名</div>
          <input v-model="timerName" :disabled="!additionMode">
          <div class="border-line"></div>
        </div>
        <div class="timer-input-hint">时间</div>
        <timer-input :time.sync="timerValue"></timer-input>
        <button @click="performEdit" class="confirmation-btn">
          提交
          <i class="material-icons">keyboard_arrow_right</i>
        </button>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
</div>
